<template>
	<view class="activity-batch-shipment" :style="[{paddingTop:statusBar+ 'px'}]" >
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">一键提货</view>
		</view>
		<view class="navigation-position"></view>
		<view class="address-area" v-if="pageItems.length>0">
			<order-address-entrance-com :shipNotice="shipNotice"></order-address-entrance-com>
		</view>
		<view class="waiting-batch-shipment-list">
			<view class="waiting-batch-shipment-item" v-for="(item,index) in pageItems" :key="index">
				<image :src="item.product_cover" class="gold-goods-icon" mode=""></image>
				<view class="waiting-batch-shipment-item-right">
					<view class="gold-goods-title">{{ item.product_title }}</view>

					<view class="gold-goods-current-price">
						<text>￥</text>
						<text>{{ item.record_price }}</text>
					</view>
				</view>
			</view>
			
			<view class="no-more" v-if="pageHasNoMore&&pageItems.length!=0" >
			  --- 没有更多数据了 ---
			</view>
			<view class="nodata-box" v-if="pageHasNoMore&&pageItems.length==0">
				<image src="/static/images/nodata-icon.png" mode="" class="nodata-icon"></image>
				<view class="nodata-text">暂无数据</view>
			</view>
		</view>
		
		
		<view class="batch-shipment-operation" v-if="pageItems.length>0">
			<view>
				<text>合计:</text>
				<text>￥</text>
				<text >{{ totalMoney }}</text>
			</view>
			<view class="batch-shipment-btn" @click="openDeliverGoodsTips()">一键提货</view>
		</view>
		
		
		<uni-popup ref="deliverGoodsTips" type="center" :mask-click="false">
			<view class="pop-content-modal pop-content-modal-deliver-goods">
				<view class="pop-content-title">重要提醒</view>
				<view class="pop-content">
					<view class="pop-content-item">确定要发货么？</view>
					<view class="pop-content-item">如果您选择发货，那么您就不能领取补贴金了哦~</view>
					<view class="pop-content-item pop-content-item-btm">平台发货时间为60-90天，已经选择不可更改</view>
				</view>
				<view class="pop-operation-area">
					<view @click="closeDeliverGoodsTips()">取消</view>
					<view @click="goBatchShipment()">去发货</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="passwordPopup" type="center" :mask-click="false">
			<view class="password-confirm-modal">
				<view class="password-confirm-tips">请输入交易密码</view>
				<view class="password-confirm-ipt-box">
					<input type="password" class="password-confirm-ipt" value="" v-model="password" placeholder="请输入交易密码" placeholder-style="color:#C0C0C0;font-size:28rpx;" />
				</view>	
				<view class="password-confirm-bottom">
					<view @click="closePop()" >取消</view>
					<view @click="confirm()" >确定</view>	
				</view>	
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	
	let params = getRequestParams();
	
	let token = params['token'];
	
	let status_bar =  params['status_bar'];
	
	let source = 'wap';
	
	if(token!=undefined){
		
		uni.setStorage({key: 'token',data: token })
		
		source = 'app';
		
	}
	if(status_bar!=undefined){
		
		uni.setStorage({ key: 'status_bar', data: status_bar })
		
	} */
	
	import store from "store";
	
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	
	import OrderAddressEntranceCom from "components/order/confirm/OrderAddressEntranceCom";
	
	import { goldWastesList,goldWastesOrders } from 'api/goldstormApi.js';
	
	import { getUser } from "api/userApi";
	
	import Pagination from "mixins/Pagination";
	
	
	
	export default {
		store,
		components: {
			OrderAddressEntranceCom
		},
		computed:{
			...mapGetters([
				'user',
				'statusBar',
				'currentAddress',
				'isLogin'
			])
		},
		data() {
			return {
				source:source,
				shipNotice:'确定要发货么？如果您选择发货，那么您就不能领取补贴金了哦～，平台发货时间为60-90天，一经选择不可更改',
				pageNumber:1,
				pageItems:[],
				pageHasNoMore:false,
				totalMoney:0.00,
				password:null,
				isClick:true
			}
		},
		methods:{
			...mapMutations([
				'setUser'
			]),
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					backToApp.postMessage('back');
				}
			},
			openDeliverGoodsTips() {
				if (!this.currentAddress) {
					uni.showToast({
						title: '请选择收货地址',
						icon:'none'
					})
					return
				}
				this.$refs.deliverGoodsTips.open('center')
			},
			closeDeliverGoodsTips() {
				this.$refs.deliverGoodsTips.close()
			},
			
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async loadPageItems() {
				return await goldWastesList({page: this.pageNumber}) 
			},
			async loadPageData() {
			    const response = await this.loadPageItems()
					if (response) {
						this.totalMoney = response.money;
						if(response.records.length>0){
							if (this.pageNumber === 1) {
							    this.pageItems = response.records
							} else {
							    this.pageItems = [...this.pageItems, ...response.records]
							}
						}else{
							this.pageHasNoMore = true
						}
						
						if(this.pageItems.length<10){
							this.pageHasNoMore = true
						}
						
					}
			},
			async goBatchShipment(){
				
				let parms = {
					address:this.currentAddress.id
				}
				this.closeDeliverGoodsTips()
				const response = await goldWastesOrders(parms)
				if(!response.message){
					this.$refs.passwordPopup.open('center')
				}else{
					if(Object.values(response.errors)[0][0]=='请输入交易密码'){
						this.$refs.passwordPopup.open('center')
					}else if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
						let _this = this
						uni.showModal({
							content:'您还未绑定支付宝账号，请使用App绑定支付宝后可转金豆！',
							confirmText:'去绑定',
							success: function (res) {
								if (res.confirm) {
									if(_this.statusBar>0){
										// window.flutter_inappwebview.callHandler('bind_alipay_app')
										bindAlipayApp.postMessage('bindali');
									}else{
										uni.navigateTo({url: '/packs/pages/download/download?from=1'})
									}
								}
							}
						})
					}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
						if(this.statusBar>0){
							setPayCodeByApp.postMessage('paycodeset');
						}else{
							uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
						}
					}else{
						uni.showModal({
							title:'提示',
							content:Object.values(response.errors)[0][0],
							confirmText:'知道了',
							confirmColor:'#FF6011',
							showCancel:false
						})
					}
				}
				
			},
			closePop(){
				this.$refs.passwordPopup.close()
				this.password = null
			},
			async confirm(){
				if(this.password){
					if(this.isClick){
						this.isClick = false;
						let parms = { 
							pay_code:this.password,
							address:this.currentAddress.id
						}
						this.closePop()
						const response =  await goldWastesOrders(parms)
						this.password = null;
						this.isClick = true;
						if(!response.message){
							uni.showToast({
								title:'提货成功'
							})
						}else{
							if(Object.values(response.errors)[0][0]=='请先绑定支付宝账号'){
								let _this = this
								uni.showModal({
									content:'您还未绑定支付宝账号，请使用App绑定支付宝后可兑换！',
									confirmText:'去绑定',
									success: function (res) {
										if (res.confirm) {
											if(_this.statusBar>0){
												bindAlipayApp.postMessage('bindali');
											}else{
												uni.navigateTo({url: '/packs/pages/download/download?from=1'})
											}
										}
									}
								})
							}else if(Object.values(response.errors)[0][0]=='请先设置交易密码'){
								if(this.statusBar>0){
									setPayCodeByApp.postMessage('paycodeset');
								}else{
									uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
								}
							}else{
								uni.showModal({
									title:'提示',
									content:Object.values(response.errors)[0][0],
									confirmText:'知道了',
									confirmColor:'#FF6011',
									showCancel:false
								})
							}
						}
					}
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				}else{
					uni.showModal({
						title:'提示',
						content:'请输入交易密码！',
						confirmText:'知道了',
						confirmColor:'#FF6011',
						showCancel:false
					})
				}
			}
		},
		async onShow() {
			if(await this.isLogin ||  await this.statusBar>0){
				await this.loadPageData()
			}
		},
		
		async onReachBottom() {
		    if (this.pageHasNoMore) return
		    this.pageNumber += 1;
		    await this.loadPageData()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.waiting-batch-shipment-list{
		margin-top: 20rpx;
	}
	.waiting-batch-shipment-item{
		width: 702rpx;
		height: 212rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto 16rpx;
		display: flex;
		.gold-goods-icon{
			display: block;
			width: 164rpx;
			height: 164rpx;
			border-radius: 12rpx;
			margin:24rpx;
		}
		.gold-goods-title{
			width: 470rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			margin: 24rpx 0 8rpx 0;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
			overflow:hidden;
			
		}
		.gold-goods-price-area{
			display: flex;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			height: 32rpx;
			>view{
				>text:nth-child(2){
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
				}
			}
			>view:nth-child(1){
				margin-right: 32rpx;
			}
		}
		.gold-goods-current-price{
			margin-top: 34rpx;
			>text:nth-child(1){
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
				line-height: 34rpx;
			}
			>text:nth-child(2){
				font-size: 44rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #FF4924;
				line-height: 52rpx;
			}
		}
	}
	.batch-shipment-operation{
		width: 100%;
		height: 100rpx;
		position: fixed;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		left:0;
		bottom: 0;
		background: #ffffff;
		padding-bottom: constant(safe-area-inset-bottom); 
		padding-bottom: env(safe-area-inset-bottom); 
		>view:nth-child(1){
			>text:nth-child(1){
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			>text:nth-child(2){
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
			}
			>text:nth-child(3){
				font-size: 40rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #FF4924;
			}
		}
		>view:nth-child(2){
			width: 224rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #FED419 0%, #FFBC1F 100%);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin:0 24rpx 0 24rpx;
		}
	}
	.pop-content-modal{
		width: 560rpx;
		height: 486rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		.pop-content-title{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			padding-top: 40rpx;
			text-align: center;
			margin-bottom: 28rpx;
		}
		.pop-content-item{
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			padding: 0 40rpx;
		}
		.pop-operation-area{
			display: flex;
			width: 100%;
			height: 86rpx;
			border-top: 1rpx solid #F0F0F0;
			position: absolute;
			bottom: 0;
			left:0;
			>view{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content:center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			>view:nth-child(2){
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF6011;
				border-left: 1rpx solid #F0F0F0;
			}
		}
	}
	.address-area{
		width: 702rpx;
		margin: 0 auto;
	}
	.no-more{
		text-align: center;
		font-size: 26rpx;
		color:#999999;
		margin-top: 30rpx;
	}
	.nodata{
		width: 100%;
		height: 50rpx;
		position: absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
	}
	.nodata-box{
		width:686rpx;
		height: 390rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.nodata-icon{
		display: block;
		width: 320rpx;
		height: 320rpx;
		margin: 0 auto;
	}
	.nodata-text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
		text-align: center;
	}
	.password-confirm-modal{
		width: 620rpx;
		height: 300rpx;
		padding:20rpx 0 64rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.password-confirm-tips{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		text-align: center;
	}
	.password-confirm-ipt-box{
		width: 528rpx;
		height: 84rpx;
		background: #F6F6F6;
		border-radius:15rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin:30rpx auto;
	}
	.password-confirm-ipt{
		width: 450rpx;
		font-size: 28rpx;
		color: #555555;
	}
	.password-confirm-bottom{
		width: 100%;
		height: 90rpx;
		display: flex;
		border-top: 1rpx solid #cccccc;
		position: absolute;
		left:0;
		bottom: 0;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
		}
		>view:nth-child(1){
			color:#999999;
		}
		>view:nth-child(2){
			color:#FF6011;
			border-left: 1rpx solid #cccccc;
		}
	}
</style>